<script setup lang="ts">
import { ref } from 'vue';



const items = [
  {
    label: '文件',
    children: [
      { label: '预览', icon: 'create', pathName: 'Preview' },
      { label: '编辑', icon: 'edit', pathName: 'Edit' },
    ]
  },
  {
    label: '格式转换',
    children: [
      { label: '文档', pathName: 'DocumentConvert' },
      { label: '音频', pathName: 'AudioConvert' },
      { label: '视频', pathName: 'VideoConvert' },
      { label: '图像', pathName: 'ImageConvert' }
    ]
  }
]
const activeIndex = ref('0')
</script>
<template>
  <div class="menu">
    <el-menu :default-active="activeIndex" mode="horizontal"
      @select="($event: string) => { activeIndex = $event; $router.push({ name: activeIndex }) }">
      <el-menu-item index="Home">首页</el-menu-item>
      <el-sub-menu v-for="(item, index) in items" :key="item" :index="`${index}`">
        <template #title>{{ item.label }}</template>
        <el-menu-item v-for="(sub, i) in item.children" :key="sub" :index="`${sub.pathName}`">{{ sub.label
        }}</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
.menu {
  width: 100%;
}
</style>
